<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>QQ登录</title>
    <script th:src="@{/js/jquery-3.4.1.min.js}" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript"  charset="utf-8"
            src="http://connect.qq.com/qc_jssdk.js"
            data-appid="101874060"
            data-redirecturi="http://www.shenmazong.com/qqlogin"
    ></script>
</head>
<body>

<div>
<a href="#" id="qqLoginBtn">QQ登录</a>
</div>
<div>
    <h1 id="nickname"></h1>
    <img id="userhead" src="#" alt="">
</div>
<script type="text/javascript">
    var cbLoginFun = function(oInfo, oOpts){
        //alert(oInfo.nickname); // 昵称
        var nick = oInfo.nickname; // 获得昵称
        var headurl = oInfo.figureurl_qq_1; //获得头像
        var gender = oInfo.gender;      // 性别
        console.log("我是谁："+nick);

        QC.Login.getMe(function (openId, accessToken) { //这里可以得到openId和accessToken

            //下面可以调用自己的保存方法
            var param = {};
            param.openId = openId;
            param.accessToken = accessToken;
            param.nick = nick;
            param.headurl = headurl;
            param.gender = gender;

            $("#nickname").text(nick);
            $("#userhead").attr('src',headurl);

            $.post("/doLogin",param,function(result){
                console.log(result);
                if(result.result == 0) {
                    console.log("数据已记录...")
                }
            });

            alert(["当前登录用户的", "openId为："+openId, "accessToken为："+accessToken].join("\n"));
        });
    };

    QC.Login({btnId:"qqLoginBtn"}, cbLoginFun);
</script>


</body>
</html>